<template>
  <el-aside :width="sidebar.isCollapse ? '64px' : '240px'" > 

    <div style="padding: 10px 0; text-align: center;">
      <img src="@/assets/logo/logo-94.png" style="width: 45px; height: 45px;">
      <span v-show="!sidebar.isCollapse"
            style="font-size: 1.4em; font-weight: 700; color: rgb(56,18,110); margin-left: 10px;">51code.vip</span>
    </div>
  
    <el-menu @select="handleSelect" :default-active="activeTab" :collapse="sidebar.isCollapse"
             class="aside-vertical-menu">
      <template v-for="(topMenu, index) in topMenuList">
        <el-sub-menu v-if="topMenu.children && topMenu.children.length" :key="index" :index="topMenu.name">
          <template #title>
            <el-icon>
              <component :is="topMenu.meta.icon"/>
            </el-icon>
            <span>{{ topMenu.meta.title }}</span>
          </template>

          <el-menu-item v-for="child in topMenu.children" :key="child.name" :index="child.name">
            <el-icon>
              <component :is="child.meta.icon"/>
            </el-icon>
            <span>{{ child.meta.title }}</span>
          </el-menu-item>
        </el-sub-menu>

        <el-menu-item v-else="!topMenu.children && topMenu.meta" :key="index + 1" :index="topMenu.name">
          <el-icon>
            <component :is="topMenu.meta.icon"/>
          </el-icon>
          <span>{{ topMenu.meta.title }}</span>
        </el-menu-item>
      </template>

    </el-menu>
 
  </el-aside>
</template>

<script setup>
import {ref, reactive, computed} from 'vue'
import {useSidebarStore} from '@/stores/sidebar';
import {useRoute, useRouter} from 'vue-router'
import {useTabsStore} from '@/stores/tabs.js'

const sidebar = useSidebarStore();
//获取pinia中的标签管理tabs
const tabsStore = useTabsStore()
//获取路由器实例，用途：用于编程式导航和访问全局路由相关的方法和属性。
const router = useRouter()
//获取当前激活的路由对象， 用途：用于访问当前路由的信息，如路径、参数、查询参数、元数据等。
const route = useRoute()
/*****
 * 通过计算属性来从路由表中获取左侧的菜单信息：
 * 注：这里只获取一级菜单项，要把子菜单项给过滤掉。
 * 判断route中的meta对象中的top属性来判断是否是顶级菜单项
 */
const topMenuList = computed(() => router.getRoutes().filter(r => r.meta.top))
console.log(topMenuList, 'topMenuList....', router.getRoutes())

/*************************
 * 处理菜单中的点击事件，当点击左侧的菜单时，需要把当前点击的菜单项添加到tabs中，并且采用编程式路由进行跳转、
 * 注：此方法只有当点击在 <el-menu-item>标签上时才会触发, 在<el-sub-menu>标签上，则不会触发
 */
const handleSelect = (index) => {
  console.log(">>你点击的菜单项是: ", index)
  console.log(">>>当前routes:", topMenuList.value)
  //找到你点击的菜单项，如果有子菜单项，则找到子菜单项。 这里的r.children? 使用了可选链操作符 (Optional Chaining Operator)。
  //它的作用是简化属性访问和方法调用时的条件判断，避免出现 undefined 或 null 导致的错误。它相当于：r.children && r.children.some(child => child.name === index)
  const menuRoute = topMenuList.value.find(r => r.name === index || r.children?.some(child => child.name === index))
  console.log("1. 你点击菜单对的路由对象: ", menuRoute)
  // 上面拿到的路由对象，则topMenu，接下来要判断当前点击的菜单项是否是子菜单项，如果是子菜单项，则需要找到子菜单项对应的路由对象
  const childRoute = menuRoute?.children?.find(child => child.name === index)
  console.log("2. 你点击菜单项的子菜单项: ", childRoute)
  // 根据判断结果，选择正确的路由对象
  const selectedRoute = childRoute || menuRoute
  console.log("3. 真正点击的路由: ", selectedRoute)
  if (selectedRoute && selectedRoute.meta) {
    //调用pinia中的标签管理中的添加标签的方法，把你选择的菜单项添加到tabs中
    //tabsStore.addTab(selectedRoute)
    tabsStore.addTab({title: selectedRoute.meta.title, name: selectedRoute.name})
    // 编程式路由跳转
    router.push({name: selectedRoute.name})
  }
}

//通过计算属性来获取当前激活的标签页，因为tabsStore.activeTab是响应式的
const activeTab = computed(() => tabsStore.activeTab)
//const activeTab = tabsStore.activeTab
console.log("================ activeTab: ", activeTab.value)

</script>
<style lang="less" scoped>
.aside-vertical-menu:not(.el-menu--collapse) {
  /* width: 225px;
  min-height: 100vh; */
  width: 235px;
  min-height: 100vh;
  border-color: transparent;
}

/* 侧边栏滚动条隐藏 */
.el-aside::-webkit-scrollbar {
  display: none;
}

.el-aside {
  background-color: #f2f2f2;
}

</style>